import { DirectiveBinding } from "vue";

// 判断浏览器是否支持全屏 API(兼容其他浏览器写法)
// const isFullscreenSupported =
//   document.documentElement.requestFullscreen ||
//   document.documentElement.webkitRequestFullscreen ||
//   document.documentElement.mozRequestFullScreen ||
//   document.documentElement.msRequestFullscreen;

// // 让指定元素进入全屏(兼容其他浏览器写法)
// function enterFullscreen() {
//   const element = document.body;
//   if (element.requestFullscreen) {
//     element.requestFullscreen();
//   } else if (element.webkitRequestFullscreen) {
//     element.webkitRequestFullscreen(); // Safari
//   } else if (element.mozRequestFullScreen) {
//     element.mozRequestFullScreen(); // Firefox
//   } else if (element.msRequestFullscreen) {
//     element.msRequestFullscreen(); // IE/Edge
//   }
// }

// // 退出全屏(兼容其他浏览器写法)
// function exitFullscreen() {
//   if (document.exitFullscreen) {
//     document.exitFullscreen();
//   } else if (document.webkitExitFullscreen) {
//     document.webkitExitFullscreen(); // Safari
//   } else if (document.mozCancelFullScreen) {
//     document.mozCancelFullScreen(); // Firefox
//   } else if (document.msExitFullscreen) {
//     document.msExitFullscreen(); // IE/Edge
//   }
// }

// 默认全屏时的图标
const defaultIconFull = "icon-tuichuquanping";
// 默认不在全屏时的图标
const defaultIconNotFull = "icon-quanping";

// 检查浏览器是否支持全屏化
const isFullscreenSupported = document.documentElement.requestFullscreen;

// 应该使用哪一个图标
const useWhichIcon = (el: HTMLElement, binding: DirectiveBinding) => {
  // 判断当前浏览器是否处于全屏状态
  const isFullscreen = document.fullscreenElement;

  const iconElement = el.querySelector("i.iconfont");
  if (iconElement) {
    if (isFullscreen) {
      iconElement.classList.remove(binding.value?.iconFull || defaultIconFull);
      iconElement.classList.add(binding.value?.iconNotFull || defaultIconNotFull);
    } else {
      iconElement.classList.remove(binding.value?.iconNotFull || defaultIconNotFull);
      iconElement.classList.add(binding.value?.iconFull || defaultIconFull);
    }
  }
};

// 点击监听
const listenFn = (el: HTMLElement, binding: DirectiveBinding) => {
  if (!isFullscreenSupported) {
    alert("浏览器暂不支持全屏功能");
    return false;
  }

  const { value } = binding;
  // 优先取 value.elementId，没有时再取 arg 作为全屏化的元素
  const elementId = value?.elementId;

  let fullTarget = null;
  if (!elementId) {
    // 默认全屏为 body 元素
    fullTarget = document.body;
  } else {
    const dom = document.getElementById(elementId);
    if (dom) {
      fullTarget = dom;
    } else {
      console.warn("找不到对应的全屏元素");
      return false;
    }
  }

  useWhichIcon(el, binding);

  // 判断当前浏览器是否处于全屏状态
  const isFullscreen = document.fullscreenElement;

  // 当前浏览器处于全屏状态时，退出全屏；否则将指定元素全屏化
  isFullscreen ? document.exitFullscreen() : fullTarget.requestFullscreen();
};

export default {
  // 当绑定的元素插入到 DOM 中时调用
  mounted(el: HTMLElement, binding: DirectiveBinding) {
    useWhichIcon(el, binding);

    el.addEventListener("click", () => listenFn(el, binding));
  },

  // 元素解绑
  unmounted(el: HTMLElement, binding: DirectiveBinding) {
    el.removeEventListener("click", () => listenFn(el, binding));
  },
};
